<template>
  <div>
    <el-button type="primary" plain>新增用户</el-button>
    <el-button type="danger" plain>批量删除</el-button>
  </div>

  <el-table
      :data="userList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column type="index" label="序号" width="120"/>
    <el-table-column prop="loginAct" label="用户名" show-overflow-tooltip/>
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="sex" label="性别" />
    <el-table-column prop="phone" label="手机号" show-overflow-tooltip/>
    <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip/>

    <el-table-column label="操作" width="230px" show-overflow-tooltip>
      <el-button type="primary" round>详情</el-button>
      <el-button type="warning" round>修改</el-button>
      <el-button type="danger" round>删除</el-button>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"
  />
</template>

<script>
  import {doGet} from "../http/httpRequest.js";

  export default {
    name: 'UserView',
    data(){
      return {
        userList:[{}],
        pageSize: 0,
        total: 0,
      }
    },

    // 在页面加载是渲染
    mounted() {
      // 默认显示第一页内容
      this.getUserData(1);
    },

    methods: {
      // 勾选与取消勾选
      handleSelectionChange(){},

      // 查询用户列表数据
      getUserData(current){
        doGet('api/user/list',{
          // 获取分页页码
          current: current
        }).then(resp=>{
          if (resp.data.code===200){
            console.log(resp)
            this.userList=resp.data.data.list;
            this.pageSize=resp.data.data.pageSize;
            this.total=resp.data.data.total;
          }
        })
      },

      // 前一页与后一页
      toPage(current){
        this.getUserData(current)
      }
    }
  }
</script>

<style scoped>
div {
  float: left;
}
.el-table {
  margin-top: 15px;
}
.el-table-column {
  text-align: center;
}
.el-pagination {
  margin-top: 10px;
  float: right;
}

</style>